<template>
  <div class="about">
    <ul>
      <li v-for="(item, index) in list">{{ item.name }} -- {{ index }}</li>
    </ul>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue';

const list = reactive([
  {
    id: 1,
    name: 'John',
  },
  {
    id: 2,
    name: 'Jane',
  },
]);
</script>
<style>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}
</style>
